<template>

	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<view class="policy-list-layout">
			<view class="policy-list">
				<view class="policy-list-item" v-for="item in dataList" :key="item.policyId" @tap="showDetail(item)">
					<image src="/static/operate/policy_icon.png" mode="aspectFit"></image>
					<view class="policy-list-item-enter">
						<text>{{item.policyId}}</text>
						<text>{{item.policyName}}</text>
					</view>
					<view class="policy-list-item-right">
						<xh-icon icon="icon_jiantou"></xh-icon>
					</view>
					<view class="line policy-list-item-line"></view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import { ref } from 'vue'
	import { getAgentPolicyList } from '@/common/api/api.js'
	const pagingRef = ref(null)
	const dataList = ref([])
	// 政策详情
	const showDetail = (item) => {
		const data = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/my/my-policy/my-policy-detail/my-policy-detail?data=${data}`
		})
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		const res = await getAgentPolicyList({}, pageNo)
		const list = res.result
		if (pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value, ...list]
		pagingRef.value.completeByTotal(list, res.page.totalElements)
	}
</script>

<style lang="scss" scoped>
	.policy-list-layout {
		padding: 30rpx;

		.policy-list {
			background-color: #fff;
			border-radius: 20rpx;

			.policy-list-item {
				display: flex;
				align-items: center;
				padding: 30rpx;
				position: relative;

				.policy-list-item-line {
					left: 30rpx;
					right: 30rpx;
				}

				image {
					width: 52rpx;
					height: 52rpx;
					flex-shrink: 0;
				}
			}

			.policy-list-item-enter {
				display: flex;
				flex-direction: column;
				margin: 0 10rpx;

				text:nth-child(2) {
					margin-top: 16rpx;
					font-size: 26rpx;
				}
			}

			.policy-list-item-right {
				display: flex;
				align-items: center;
				margin-left: auto;
				align-self: flex-start;
				color: $xh-red-color;
				font-size: 26rpx;
				flex-shrink: 0;
			}
		}
	}
</style>